<template>
  <view class="li" @click="goDetail(info.id)">
    <view class="main">
      <view class="main-icon">
        <i-icon
          v-if="info.isgover"
          icon="iconguanxun"
          type="single"
          size="36rpx"
          color="#EB5C02"
        ></i-icon>
        <i-icon
          v-else
          icon="iconxun"
          type="single"
          size="36rpx"
          color="#FBB000"
        ></i-icon>
      </view>
      <view class="info">
        <view class="line">
          <view class="name flex">
            <view>
              <image
                v-if="info.brand_logo"
                class="car-icon"
                :src="'https://files.yzsheng.com' + info.brand_logo"
                mode="aspectFill"
              ></image>
            </view>
            <text class="name-text">车型：</text>
          </view>
          <text class="con font-28">
            {{ info.brand_name }}{{ info.car_type_name }}
            {{ info.configuration_name }}
          </text>
        </view>
        <view class="line" v-if="info.vin_no">
          <text class="name">VIN:</text>
          <text class="con">{{ info.vin_no }}</text>
        </view>
        <view class="line">
          <text class="name">需求配件：</text>
          <text class="con pei-con">{{ accessoryDetails }} </text>
        </view>
        <view class="line">
          <text class="name">地区：</text>
          <text class="con">{{ info.provinceName }} {{ info.cityName }}</text>
        </view>
        <view class="flex-line flex flex-jc-sb">
          <view class="line">
            <text class="name">发布日期：</text>
            <text class="con">{{
              dateFormat(info.addtime, 'MM/DD HH:mm')
            }}</text>
          </view>
          <view class="line">
            <text class="name">有效期至：</text>
            <text class="con">{{
              dateFormat(info.effective_time, 'MM/DD')
            }}</text>
          </view>
        </view>
        <view class="line">
          <text class="name">询价方： </text>
          <view class="con flex flex-ai-c">
            <text class="ma">{{ info.store_name }}</text>
            <i-icon
              v-if="info.store_status"
              class="icon-store"
              icon="iconmendianrenzheng"
              type="single"
              size="32rpx"
              color="#60C534"
            ></i-icon>
            <i-icon
              v-if="info.deposit_balance > 0"
              class="icon-store"
              icon="iconbao_1"
              type="single"
              size="28rpx"
              color="#eb5c02"
            ></i-icon>
          </view>
        </view>
        <view class="line">
          <text class="name">联系人：</text>
          <view class="con flex flex-ai-c">
            <text class="ma">{{ formatName }}</text>
            <i-icon
              v-if="info.user_status"
              class="icon-store"
              icon="iconshenfenrenzheng"
              type="single"
              size="44rpx"
              color="#60C534"
            ></i-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="bar">
      <view class="left person-price">
        <view class="line">
          <text class="orange">{{ info.browse_number }}次</text>
          浏览/
          <text class="orange">{{ info.quote_number }}人</text>参与报价
        </view>
      </view>

      <view class="right">
        <button class="btn-bg-yellow" @click.stop="gotoQuote(info.id)">
          {{ btnText }}
        </button>
        <view class="tips">报价后可联系买方</view>
      </view>
    </view>
  </view>
</template>

<script>
import { dateFormat } from '@/utils/formatDate.js'

export default {
  data() {
    return {}
  },
  props: {
    info: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  computed: {
    accessoryDetails() {
      let str = ''
      for (let i = 0; i < this.info.car_part_details.length; i++) {
        str =
          str +
          this.info.car_part_details[i].part_category_name +
          '*' +
          this.info.car_part_details[i].purchase_number +
          '；'
      }
      return str
    },
    formatName() {
      return (
        this.info.truename.slice(0, 1) +
        '*'.repeat(this.info.truename.length - 1)
      )
    },
    btnText() {
      if (
        this.info.store_id === this.$store.state.userInfoDetail.store.storeId
      ) {
        return '取消询价'
      } else if (this.info.isOffer) {
        return '编辑报价'
      }
      return '我要报价'
    },
  },
  methods: {
    dateFormat,

    //跳转寻车详情
    goDetail(id) {
      if (this.btnText === '我要报价') {
        uni.navigateTo({
          url: '/pages_findAccessory/inquiryDetails/inquiryDetails?id=' + id,
        })
      } else if (this.btnText === '编辑报价') {
        uni.navigateTo({
          url: '/pages_findAccessory/submitQuote/submitQuote?type=1&id=' + id,
        })
      } else {
        uni.navigateTo({
          url: '/pages_findAccessory/myInquiryDetail/myInquiryDetail?id=' + id,
        })
      }
    },

    gotoQuote(id) {
      if (this.btnText === '我要报价') {
        uni.navigateTo({
          url: '/pages_findAccessory/submitQuote/submitQuote?type=0&id=' + id,
        })
      } else if (this.btnText === '编辑报价') {
        uni.navigateTo({
          url: '/pages_findAccessory/myQuoteDetail/myQuoteDetail?id=' + id,
        })
      } else {
        uni.navigateTo({
          url: '/pages_findAccessory/myInquiryDetail/myInquiryDetail?id=' + id,
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin point() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
}

@mixin point2() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
}

.li {
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.14);
  background: #fff;
  margin-bottom: 24rpx;
  border-radius: 10rpx;
  overflow: hidden;

  &:nth-child(1) {
    border-radius: 0 0 10rpx 10rpx;
  }

  .main {
    border-bottom: 2rpx solid #f5f5f5;
    padding: 32rpx 0 25rpx;
    margin: 0 16rpx;
    display: flex;

    .main-icon {
      flex-direction: row;
      width: 65rpx;
      height: 36rpx;
      overflow: hidden;
    }

    .info {
      width: 91%;
      flex-direction: row;
      .title {
        overflow: hidden;

        .icon {
          margin-top: 8rpx;
          width: 36rpx;
          height: 36rpx;
          float: left;
          image {
            width: 40rpx;
            height: 40rpx;
            border: 1px solid;
          }
        }

        .icon-main {
          float: left;
          width: 392rpx;
          @include point2;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 46rpx;
        }
      }

      .line {
        display: flex;
        overflow: hidden;
        margin: 10rpx 0;
        font-size: 26rpx;
        font-weight: 500;
        color: #9a9a9a;

        .name {
          width: 130rpx;

          .car-icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 15rpx;
          }
        }

        .con {
          flex: 1;
          color: #343434;

          .icon-store {
            padding-left: 6rpx;
          }
        }

        .orange {
          color: #eb5b01;

          &.import {
            @include point;
          }
        }

        &:nth-child(1) {
          margin: 0 0 10rpx;
        }

        .pei-con {
          @include point2;
          padding: 8rpx 16rpx;
          width: 494rpx;
          background: #fff6ce;
          border-radius: 5rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 40rpx;
        }
      }

      .flex-line {
        .line {
          margin: 0;
        }
      }
    }
  }

  .bar {
    // overflow: hidden;
    display: flex;
    padding: 20rpx 0 20rpx;
    margin: 0 16rpx;
    border-bottom: 2rpx solid #f5f5f5;

    .person-price {
      margin-top: 26rpx;
      font-size: 29rpx;
      font-family: PingFang SC;
      color: #666666;

      .orange {
        color: #eb5c02;
      }
    }

    .left {
      width: 60%;
      flex-direction: row;
      .store-name {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        float: left;
        @include point;
        width: 472rpx;
      }

      .bar-bottom {
        overflow: hidden;

        clear: both;

        .user-name {
          // float: left;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
        }

        .icon-group {
          float: left;
          margin-left: 20rpx;

          image {
            &:nth-child(1) {
              width: 44rpx;
              height: 28rpx;
            }

            &:nth-child(2) {
              width: 90rpx;
              height: 30rpx;
              margin: 0 10rpx;
            }

            &:nth-child(3) {
              width: 30rpx;
              height: 32rpx;
            }
          }
        }
      }
    }

    .right {
      flex: 1;
      width: 30%;
      text-align: center;
      .btn-bg-yellow {
        display: inline-block;
        width: 170rpx;
        height: 56rpx;
        line-height: 56rpx;
      }
      .tips {
        padding-top: 8rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #999;
      }
    }
  }
}

/deep/ uni-button:after {
  border: none;
}
</style>
